<template>
    <el-main>

        <!-- 搜索框 -->
        <el-form :model="searchParam" ref="searchRef" :inline="true" label-width="80px" size="default">
            <el-form-item label="" prop="searchParam.param.roleName">
                <el-input v-model="searchParam.param.roleName" placeholder="输入角色名称"></el-input>
            </el-form-item>
            <el-form-item prop="operation">
                <el-button icon="Search" @click="onSearch">搜索</el-button>
                <el-button icon="Close" type="danger" plain @click="resetForm(searchRef)">重置</el-button>
                <el-button icon="Plus" type="primary" @click="onAdd">新增</el-button>
            </el-form-item>
        </el-form>



        <el-table :data="tableList" :height="tableHeight" style="width: 100%" border stripe>
            <el-table-column prop="roleName" label="角色名称" width="180" />
            <el-table-column prop="remark" label="角色备注" width="180" />
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" size="small" @click="editRole(scope.row)">编辑</el-button>
                    <el-button link type="primary" icon="Delete" size="small"
                        @click="delRole(scope.row.id, scope.row.roleName)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="searchParam.curPage" v-model:page-size="searchParam.pageSize"
            :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="searchParam.total"
            @size-change="sizeChange" @current-change="currentChange" />




        <!-- 新增、编辑弹框 -->
        <SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
            @on-close="onClose" @on-confirm="submitAdd">
            <template v-slot:content>
                <el-form :model="roleData" ref="addRef" :rules="rules" label-width="80px" :inline="false" size="normal">
                    <el-form-item label="角色名称" prop="roleData.roleName">
                        <el-input v-model="roleData.roleName" placeholder="角色名称"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="roleData.remark">
                        <el-input v-model="roleData.remark"></el-input>
                    </el-form-item>
                </el-form>

            </template>
        </SysDialog>


    </el-main>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { ElMessage, ElMessageBox,type FormInstance } from 'element-plus';
import { getListApi, addRole, deleteRoles } from '@/api/role';

// ------------弹窗-------------------
const { dialog, onClose, onShow } = useDialog();

// 表单ref属性
const addRef = ref<FormInstance>();
const rules = reactive({
    roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
        { min: 3, max: 20, message: '长度必须为 3 到 20', trigger: 'blur' },
    ],
});



const roleData = reactive({
    id: '',
    roleName: '',
    remark: '',
});



const onAdd = () => {
    dialog.title = "新增"
    dialog.height = 150
    onShow();
};

const submitAdd = () => {
    addRef.value?.validate(async (valid) => {
        if (valid) {
            let res = await addRole(roleData)
            if (res && res.code == 200) {
                ElMessage.success("添加角色成功")
                getList()
                onClose()
            } else {
                ElMessage.error(res.msg)
            }

        }
    })

    // onConfirm();
};

const editRole = (row: any) => {
    console.log(row)
    roleData.id = row.id
    roleData.roleName = row.roleName
    roleData.remark = row.remark
    dialog.title = "编辑"
    dialog.height = 150
    onShow();

}

const delRole = (id: Number, roleName: String) => {
    ElMessageBox.confirm(
        '删除角色:' + roleName + '?',
        '确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {

            let res = await deleteRoles([id]);
            if (res && res.code == 200) {
                getList()
                ElMessage({
                    type: 'success',
                    message: '已删除',
                })
            } else {
                ElMessage({
                    type: 'error',
                    message: '删除失败',
                })
            }


        })
        .catch(() => {
            // ElMessage({
            //     type: 'info',
            //     message: '已取消',
            // })
        })
}



// ----------------- 表格及搜索--------------------
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    // 手动重置搜索参数
    searchParam.param.roleName = '';
    // 重新加载数据
    getList();
}

const searchRef = ref<FormInstance>();
const searchParam = reactive({
    curPage: 1,
    pageSize: 10,
    total: 0,
    pages: 0,
    param: {
        roleName: '',
    }
});

const onSearch = () => {
    getList()

};

const tableHeight = ref(300);
const tableList = ref([]);

const getList = async () => {
    let res = await getListApi(searchParam);
    if (res && res.code == 200) {
        console.log(res);
        tableList.value = res.data.list
        searchParam.total = res.data.total;
        searchParam.pages = res.data.pages;
        searchParam.curPage = res.data.curPage;

    }
};



const sizeChange = (size: number) => {
    searchParam.pageSize = size;
    getList();

}

const currentChange = (page: number) => {
    searchParam.curPage = page;
    getList();

}


onMounted(() => {
    nextTick(() => {
        tableHeight.value = window.innerHeight = 220;
    });
    getList();
})

</script>

<style scoped lang="scss"></style>